<div *ngIf="isLoading" style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;background-color:rgba(0,0,0,0.2); z-index: 99999;">
	<mat-progress-bar mode="indeterminate" color="warn" style="position: absolute; top: 0px; left: 0px; right: 0px; z-index: 99999;">
	</mat-progress-bar>
</div>
<div *ngIf="serverErrorBanner$ | async" class="banner">
	<div>
		<span>{{'msg.server-connection-failed' | translate}}</span>
		<mat-icon>block</mat-icon>
	</div>
</div>
<mat-sidenav-container class="sidenav-container" [hasBackdrop]="false">
	<mat-sidenav #matsidenav *ngIf="showNavigation && showSidenav" class="sidenav" [mode]="showSidenav">
		<app-sidenav #sidenav [sidenav]="matsidenav" (goToPage)="onGoToPage($event)" (goToLink)="onGoToLink($event)"></app-sidenav>
	</mat-sidenav>
	<mat-sidenav-content [style.background-color]="backgroudColor" (click)="checkToCloseSideNav()">
		<div *ngIf="showNavigation" class="header" [style.background-color]="layoutHeader.bkcolor" [style.color]="layoutHeader.fgcolor">
			<div *ngIf="showSidenav && showSidenav !== 'side'" class="sidenav-toogle">
				<button mat-icon-button 
					(click)="$event.stopPropagation(); (matsidenav.opened) ? matsidenav.close() : matsidenav.open()">
					<mat-icon aria-label="Menu">menu</mat-icon>
				</button>
			</div>
			<div #header class="items" [style.textAlign]="layoutHeader.itemsAnchor">
				<ng-container *ngFor="let item of layoutHeader.items; let i = index" [ngSwitch]="item.type">
					<ng-container *ngSwitchCase="'button'">
						<button mat-raised-button
								[id]="item.id"
								[style.background-color]="item.bkcolor ?? layoutHeader.bkcolor" 
								[style.color]="item.fgcolor ?? layoutHeader.fgcolor"
								[style.fontFamily]="layoutHeader.fontFamily"
								[style.fontSize]="layoutHeader.fontSize + 'px !important'"
								[style.marginLeft.px]="item.marginLeft"
								[style.marginRight.px]="item.marginRight">
							{{ item.property?.text ?? item.type }}
						</button>
					</ng-container>
					<ng-container *ngSwitchCase="'label'">
						<button mat-button
								[id]="item.id"
								[style.background-color]="item.bkcolor ?? layoutHeader.bkcolor" 
								[style.color]="item.fgcolor ?? layoutHeader.fgcolor"
								[style.fontFamily]="layoutHeader.fontFamily"
								[style.fontSize]="layoutHeader.fontSize + 'px !important'"
								[style.marginLeft.px]="item.marginLeft"
								[style.marginRight.px]="item.marginRight">
							{{ item.property?.text ?? item.type }}
						</button>
					</ng-container>
					<ng-container *ngSwitchCase="'image'">
						<button mat-icon-button
								[id]="item.id"
								[style.background-color]="item.bkcolor ?? layoutHeader.bkcolor" 
								[style.color]="item.fgcolor ?? layoutHeader.fgcolor"
								[style.marginLeft.px]="item.marginLeft"
								[style.marginRight.px]="item.marginRight">
							<mat-icon>{{ item.icon }}</mat-icon>
						</button>
					</ng-container>
				</ng-container>
			</div>
			<div class="header-button">
				<div class="alarm-layout" style="min-width: 40px;">
					<button mat-icon-button *ngIf="alarms.show" (click)="onAlarmsShowMode('collapse')">
						<mat-icon aria-label="Alarms">notifications_none</mat-icon>
						<div class="button-counter alarm-color" [style.opacity]="alarms.count?'':'0'">{{alarms.count}}</div>
					</button>
				</div>
				<div class="info-layout" style="min-width: 40px;">
					<button mat-icon-button *ngIf="infos.show" (click)="onAlarmsShowMode('collapse')">
						<mat-icon aria-label="Info">error_outline</mat-icon>
						<div class="button-counter info-color" [style.opacity]="infos.count?'':'0'">{{infos.count}}</div>
					</button>
				</div>
				<div class="header-date-time" *ngIf="layoutHeader.dateTimeDisplay">
                    {{ currentDateTime | date: layoutHeader.dateTimeDisplay }}
				</div>				
				<div *ngIf="securityEnabled" class="header-login">
					<button mat-icon-button (click)="onLogin()">
						<mat-icon aria-label="Login" [style.color]="isLoggedIn() ? 'rgb(59, 144, 255)' : layoutHeader.fgcolor">account_circle</mat-icon>
					</button>
					<div *ngIf="layoutHeader.loginInfo && loggedUser$ | async as user" class="info">
						<ng-container [ngSwitch]="layoutHeader.loginInfo">
							<ng-container *ngSwitchCase="'username'">
								<span class="primary">{{ user?.username }}</span>
							</ng-container>
							<ng-container *ngSwitchCase="'fullname'">
								<span class="primary">{{ user?.fullname }}</span>
							</ng-container>
							<ng-container *ngSwitchCase="'both'">
								<span class="primary">{{ user?.username }}</span>
								<span class="secondary">{{ user?.fullname }}</span>
							</ng-container>
						</ng-container>
					</div>
				</div>
			</div>
		</div>
		<div id="container"  [ngClass]="showNavigation?'home-container-nav':'home-container'" #container (click)="checkToCloseSideNav()">
			<app-cards-view *ngIf="!showHomeLink && homeView && homeView.type === cardViewType" #cardsview [edit]="false" [options]="gridOptions"
				[view]="homeView" [hmi]="hmi" [gaugesManager]="gaugesManager">
			</app-cards-view>
			<app-fuxa-view *ngIf="!showHomeLink && homeView && homeView.type !== cardViewType" #fuxaview class="home-body" id="home" [view]="homeView"
				[hmi]="hmi" [gaugesManager]="gaugesManager" (ongoto)="onGoToPage($event)">
			</app-fuxa-view>
			<ng-container *ngFor="let iframe of iframes">
				<app-iframe [link]="iframe.link" class="home-body" [style.display]="iframe.hide ? 'none' : 'block'" style="width:100%; height:100%"></app-iframe>
			</ng-container>
			<div id="alarms-panel" [style.width]="alarmPanelWidth">
				<app-alarm-view #alarmsview [fullview]="false" (showMode)="onAlarmsShowMode($event)"></app-alarm-view>
			</div>
		</div>
	</mat-sidenav-content>

</mat-sidenav-container>
